import React from 'react'
import styled from 'styled-components'

import { icons } from '../shared/icons'

const Svg = styled.svg<IconProps>`
  display: ${props => (props.block ? 'block' : 'inline-block')};
  vertical-align: middle;

  shape-rendering: inherit;
  transform: translate3d(0, 0, 0);
`

const Path = styled.path`
  fill: ${props => props.color};
`

export interface IconProps {
  /** 图标名*/
  icon: keyof typeof icons
  /** 是否块级元素 */
  block?: boolean
  /** 颜色 */
  color?: string
}

export function Icon(props: IconProps) {
  const { block, icon, color } = props
  return (
    <Svg viewBox="0 0 1024 1024" width="20px" height="20px" block={block} {...props}>
      <Path d={icons[icon]} color={color} />
    </Svg>
  )
}
Icon.defaultProps = {
  block: false,
  color: 'black'
}
